<template>
  <div class="login-container">
    <div class="logo">
      <i class="icon iconfont icon-LOGO"></i>
    </div>
    <div class="box-card">
        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"  class="demo-ruleForm">
           <h3 class="title">南环街道服务卫生中心</h3>
          <div class="box-card-item">
            <span>
              <i class="icon iconfont icon-yishengrenzheng"></i>
            </span>
            <el-form-item prop="username">
              <el-input type="text" v-model="ruleForm2.username" autocomplete="on" placeholder="请输入账号"></el-input>
            </el-form-item>
          </div>
          <div class="box-card-item">
             <span>
              <i class="icon iconfont icon-mima"></i>
            </span>
            <el-form-item prop="wordpass">
              <el-input type="password" v-model="ruleForm2.wordpass" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
          </div>
          <div class="box-card-item">
            <el-form-item>
              <el-button :loading="loading" type="primary"  @click.native.prevent="handleLogin">
                Sign in
              </el-button>
            </el-form-item>
          </div>
        </el-form>
    </div>
    
  </div>
</template>

<script>
  export default {
    data() {
      var validateUsername = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else {
          if (this.ruleForm2.wordpass !== '') {
            this.$refs.ruleForm2.validateField('wordpass');
          }
          callback();
        }
      };
      var validateWordPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }  else {
          callback();
        }
      };
      return {
        ruleForm2: {
          username: '',
          wordpass: '',
        },
        loading: false,
        rules2: {
          username: [
            { validator: validateUsername, trigger: 'blur' }
          ],
          wordpass: [
            { validator: validateWordPass, trigger: 'blur' }
          ]
        }
      };
    },
    methods:{
      handleLogin:function(){
        if(this.ruleForm2.username == 'admin'){
           console.log("我点击了")
           this.$router.push({ path: this.redirect || '/Home' })
        }
        else{
          alert("我不行了")
        }
      }
    }

  }
</script>
<style lang="less" scoped>
@fontColor:#fff9dd;
@backColor:#009983;
@primaryColor:#a8d182;
.box-card{
  position: absolute;
  width: 420px;
  padding: 0;
  left: 50%;
  top: 50%;
  margin: -200px -210px;
  padding: 30px 30px 30px 20px;
  box-shadow: 0px 0px 20px @primaryColor;
   border-radius: 10px;
   .iconfont{
     color: @fontColor;
   }
}

.box-card-item{
  display: flex;
  align-items: center;
  .iconfont{
    font-size: 25px;
    padding: 0 10px;
  }
  .el-form-item{
    width: 350px;
    padding: 0;
    margin: 0;
  }
}
.box-card-item:nth-of-type(2){
  margin-top: 30px;
}
.box-card-item:nth-of-type(3){
  margin-top: 30px;
  .el-button{
    width: 380px;
    height: 38px;
    margin-left: 15px;  
    background: @backColor;
    border: 1px solid @fontColor;
  }
  .el-button:hover{
    background: @fontColor;
    color: @backColor;
  }
  .el-button:active{
    background: @backColor;
    color: @fontColor;;
  }
}
.login-container{
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: @backColor;
  text-align: center;
}
.logo{
  padding: 20px;
  text-align: left;
  .iconfont{
    font-size: 60px;
    color: @fontColor;
  }
}
  .title {
    font-size: 26px;
    font-weight: 400;
    color: @fontColor;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }
</style>
